<div class="mdl-card__title title container-title-details">
  <div class="mdl-card__title-text title-details" *ngIf="myTaskList">
    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1" [class.is-checked]="isOpen">
      <input type="checkbox" id="switch-1" class="mdl-switch__input" [(ngModel)]="isOpen" (change)="onChange(isOpen)">
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{taskStateDisplay}} Tasks</span>
    </label>
  </div>
</div>
<div class="page-content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--12-col mdl-shadow--2dp" *ngIf="myTaskList">
        <br>
        <br>
        <activiti-tasklist [assignment]="'assignee'"
                            [state]="taskState"
                            [data]="myTaskListDataTable"
                            (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
                            #activititasklist></activiti-tasklist>
      </div>
      <div class="mdl-cell mdl-cell--12-col mdl-shadow--2dp" *ngIf="!myTaskList">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="taskStateFilterChanged()">
          Back to Task List
        </button>
        <hr>
        <br>
        <activiti-task-details [taskId]="currentTaskId" (formCompleted)="onFormCompletedInTaskList($event)"
                              [showHeader]="false" [showHeaderContent]="false" [showInvolvePeople]="false"
                              [showFormTitle]="false"   [showChecklist]="false" [showComments]="false"
                              [readOnlyForm]="true"
                              [showFormRefreshButton]="false"  #activitidetails></activiti-task-details>
      </div>
    </div>
</div>